<template>
  <div class="login-container">

    <div class="loginTitle">Hi！欢迎登录</div>
    <div class="card">
      <div class="form-container">
        <div class="form-item">
          <div class="input">
            <img class="logoTop" src="../../img/login/Rectangle90Coy4@2x.png"/>
            <input v-model="userName" type="text" placeholder="请输入手机号码"/>
          </div>
        </div>
        <div class="form-item">
          <div class="input">
            <img class="logoTop" src="../../img/login/Rectangle90Copy@2x.png"/>
            <input v-model="password" type="text" placeholder="请输入验证码"/>
            <div class="verify" @click="verify">
            {{ countdown > 0 ? `${countdown}秒后重新获取` : '获取验证码' }}
          </div>
          </div>
        </div>
      </div>
      <div class="tipsCenter">
        <div class="tips">
          <img @click="noPhoneHandler" class="logoTop" v-if="suncode==1" src="../../img/login/check-circle@3x.png"/>
          <img @click="noPhoneHandler" class="logoTop" v-if="suncode==2" src="../../img/login/check-circle1@3x.png"/>
        </div>
        <span @click="noPhoneHandler">我已详细阅读并同意<a>《隐私政策》</a></span>
      </div>



      <div class="button-container">
        <van-button class="button-containerClick" round type="primary" color="#0BBBFC" block @click="submitHandler"
                    v-if="suncode==1" style="opacity: 0.5">
          立即登录
        </van-button>
        <van-button class="button-containerClick" round type="primary" color="#0BBBFC" block @click="submitHandler"
                    v-else>
          立即登录
        </van-button>
      </div>
      <div class="register-link">
        没有账号？<span @click="$router.push('/register')">去注册</span>
      </div>
    </div>
  </div>
  <!--  <Loading></Loading>-->
</template>

<script setup>

import {useUserStore} from '@/stores'
import {useRouter, useRoute} from 'vue-router'

const userStore = useUserStore()
const route = useRoute()
const router = useRouter()

const userName = ref('')
const password = ref('')
const countdown = ref(0)
const countdownTimer = ref(null)

const suncode = ref('1')
const opacityco = ref('1')
document.title = '登录'; // 修改页面标题
// 注册
const noPhoneHandler = () => {
  console.log(this)
  console.log(suncode)
  if (!userName.value) {
    showFailToast('请输入手机号')
    return
  }
  if (!password.value) {
    showFailToast('请输入验证码')
    return
  }

  // showSuccessToast('您点击了没有账号？')
  if (suncode.value == 1) {
    suncode.value = 2
  } else {
    suncode.value = 1
  }
}

const verify = async () => {
  if (!userName.value) {
    showFailToast('请输入手机号')
    return
  }
  
  if (countdown.value > 0) return
  
  // 这里添加获取验证码的逻辑
  showSuccessToast('验证码已发送')
  
  // 开始60秒倒计时
  countdown.value = 60
  countdownTimer.value = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      clearInterval(countdownTimer.value)
    }
  }, 1000)
}

// 清理定时器
onBeforeUnmount(() => {
  if (countdownTimer.value) {
    clearInterval(countdownTimer.value)
  }
})

const submitHandler = async () => {
  showLoadingToast({
    message: '加载中...',
    forbidClick: true,
    overlay: true,
    duration: 0,
  })
  if (suncode.value == 1) {
    showFailToast('请勾选条款')
    return
  }
  console.log(userName.value)
  if (!userName.value) {
    showFailToast('请输入手机号~')
    return
  }
  if (!password.value) {
    showFailToast('请输入验证码~')
    return
  }
  // const params = { account: userName.value, password: password.value }
  // const res = await login(params)
  // if (res.code === 200) {
  //   userStore.setToken(res.result.token)
  userStore.setToken('123')
  // console.log(route.query.returnUrl)
  router.push(route.query.returnUrl || '/index')
  showSuccessToast('登录成功')
  // } else {
  //   showFailToast(res.msg)
  // }
}
// 其他登录方式
const otherLoginHandler = (type) => {
  showToast(`您选择了${type}登录`)
}
</script>

<style scoped lang="less">
.verify.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}
.verify.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.loginTitle {
  font-family: PingFangSC, PingFang SC;
  font-weight: bold;
  font-size: 34px;
  color: #333333;
  line-height: 48px;
  letter-spacing: 1px;
  text-align: left;
  margin: 119px 36px 0px;
  font-style: normal;
}

.logoTop {
  width: 100%;
}

.login-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;

  .top {
    position: relative;
    background: @default-color;
    width: 100%;
    height: 240px;
    display: flex;
    align-items: end;
    justify-content: center;

    &::after,
    &::before {
      content: '';
      position: absolute;
      width: 17px;
      height: 132px;
      background: #fff;
      border-radius: 8px;
      opacity: 0.2;
    }

    &::after {
      right: 49px;
      top: 76px;
    }

    &::before {
      right: 16px;
      top: 99px;
    }

    .ban {
      position: relative;
      width: 86%;
      height: 100px;
      background: #fff;
      border-radius: 8px 8px 0 0;
      z-index: 1;
      display: flex;

      .zhu {
        position: absolute;
        border-radius: 8px;
        width: 17px;

        &.zhu01,
        &.zhu03,
        &.zhu05 {
          background: @default-color;
          height: 60px;
        }

        &.zhu02,
        &.zhu04 {
          background: #fff;
          border-radius: 8px 8px 0 0;
          height: 50px;
        }

        &.zhu01 {
          left: 60px;
          top: 0;
          height: 60px;
          border-radius: 0 0 8px 8px;
        }

        &.zhu02 {
          left: 77px;
          top: -50px;
        }

        &.zhu03 {
          left: 94px;
          top: 0;
          height: 80px;
          border-radius: 0 0 8px 8px;
        }

        &.zhu04 {
          left: 111px;
          top: -30px;
          height: 30px;
        }

        &.zhu05 {
          left: 128px;
          top: 0;
          height: 30px;
          border-radius: 0 0 8px 8px;
        }

        &.zhu06 {
          background: @default-color;
          width: 17px;
          height: 17px;
          left: 94px;
          top: 90px;
          border-radius: 50%;
        }
      }
    }
  }

  .card {
    position: relative;
    margin: 18px 35px;
    background: #fff;
    //width: 86%;
    border-radius: 0 0 8px 8px;
    //box-shadow:
    //  10px 5px 15px rgba(218, 235, 254, 0.5),
    //  -10px 5px 15px rgba(218, 235, 254, 0.5);
    //padding: 20px;
    span{
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: #999999;
      line-height: 12px;
      text-align: left;
      font-style: normal;
    }
    .form-container {
      .form-item {
        background: #F6FAFF;
        display: flex;
        align-items: center;
        height: 49px;
        margin-bottom: 18px;
        border-radius: 27px;
        overflow: hidden;
        .input {
          margin-left: 10px;
          display: flex;
          align-items: center;
          width: 100%;
          height: 100%;
          position: relative;
          //border-bottom: 1px solid @border-color-01;
          font-size: 14px;
          background: #F6FAFF;
          img {
            width: 17px;
            margin-right: 10px;
          }

          input {
            width: 60%;
            height: 100%;
            border: none;
            padding-top: 2px;
            background: #F6FAFF;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #333333;
          }
        }

        .iconfont {
          font-size: 20px;
          color: @text-color-02;
        }
      }
    }
    .button-container {
      font-style: normal;

    }
    .footer-container {
      display: flex;
      justify-content: space-evenly;
      .item {
        .iconfont {
          font-size: 30px;
        }
      }
    }
  }
  .tips {
    font-size: 12px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 44px;
    img {
      width: 12px;
      height: 12px;
      margin-right: 8px;
    }
  }
  .tipsCenter{
    display: flex;
    a {
      color: #0BBBFC;
    }
  }
  .button-containerClick {
    font-family: PingFangSC, PingFang SC;
    font-weight: bold;
    font-size: 18px;
    color: #FFFFFF;
    line-height: 25px;
    text-align: left;
    font-style: normal;
  }

  .register-link {
    margin-top: 16px;
    text-align: center;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #999999;

    span {
      color: #2987FD;
      cursor: pointer;
    }
  }
  .verify{
    font-family: PingFangSC, PingFang SC;
    font-weight: bold;
    font-size: 14px;
    color: #0BBBFC;
    line-height: 20px;
    text-align: left;
    font-style: normal;
    position: absolute;
    right: 10px;
  }
}

:v-deep(.van-divider) {
  margin: 10px 0;
}
</style>
